<template>
  <div class="container">
    <div class="item-a">header</div>
    <div class="item-b">main</div>
    <div class="item-c">sidebar</div>
    <div class="item-d">footer</div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.container {
  width: 100%;
  height: 300px;
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  grid-template-rows: 80px auto 80px; 
  /* grid-column-gap: 10px;
  grid-row-gap: 15px; */
  /* grid-gap: 30px; */
  gap: 20px;
}

.item-a {
  /* grid-area: header; */
  background: chocolate;
}
.item-b {
  /* grid-area: main; */
  background: cornsilk;
}
.item-c {
  /* grid-area: sidebar; */
  background: darkcyan;
}
.item-d {
  /* grid-area: footer; */
  background: darkkhaki;
}

</style>